// 获取选项卡
selectTab()
function selectTab(){
        // 1.获取所有的按钮 
    const tabHeaderItems = document.querySelectorAll('#J_tab_header .tab-header-item') 
    const tabContentItems = document.querySelectorAll("#J_tab_content .tab-content-item")
    // 2.遍历所有的tabHeaderItems，然后分别给每一个tab-header-item添加click点击事件
    let activeIndex = 0; // 记录当前被激活的索引 序号列
    for(let i = 0; i < tabHeaderItems.length; i++){
        tabHeaderItems[i].addEventListener('click', function(){
            // 点击后要做的事情
            // 点击后，先要清除前面一个tab-header-item中的class active
            tabHeaderItems[activeIndex].classList.remove('active')
            // 然后再给自己添加上class=active
            // this就是指当前绑定事件的元素
            this.classList.add("active")
            // 隐藏当前被激活的这一项 tab-content-item
            tabContentItems[activeIndex].style.display = "none"
            // 显示自身
            tabContentItems[i].style.display = "block"
            // 更新当前被激活项的索引
            activeIndex = i   
        })
    }    
}
(function(){
    // 最近在看-历史记录
    var mySwiper = new Swiper ('#J_swiper-history', {
        slidesPerView : "auto",
        spaceBetween : 11,
    })        
    var navSwiper = new Swiper ('#J_nav', {
        slidesPerView : 6.5,
    }) 
    var bannerSwiper = new Swiper ('#J_banner', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    })   
    // 热门排行   
    var hotRankSwiper = new Swiper('#J_hot-rank', {
        slidesPerView : 2,
        spaceBetween : 19, 
    }) 
    // 最新热播
    var hotPlaySwiper = new Swiper('#J_hot-play', {
        slidesPerView : 2,
        spaceBetween : 19, 
    }) 
    // 综合推荐
    var recommandSwiper = new Swiper('#J_recommand', {
        slidesPerView : 2,
        spaceBetween : 19, 
    }) 
})()